<template>
  <div class="user-center">
    <van-nav-bar
      title="个人资料"
      :fixed=true
      :border=false
      @click-left="handleToBack"
      left-arrow
      style="height:42px;"
    />
    <div class="avatar">
      <span class="title">头像</span>
      <img src="../../../assets/img/mine/defaultImgs.jpg" alt="">
    </div>
    <van-cell-group>
      <van-cell
        title="昵称"
        is-link
        :value="userInfo.user_name"
        @click="goToChangeNickName"
      />
      <van-cell
        title="性别"
        is-link
        :value="userSex"
        @click="onChangeSex"
      />
      <van-cell
        title="生日"
        is-link
        :value="userInfo.brithday ? userInfo.brithday : '未填写'"
        @click="showDateTime"
      />
      <van-cell
        title="手机号"
        :value="phoneNumber"
      />
    </van-cell-group>
    <!-- 退出登录 -->
    <van-button
      size=large
      text="退出登录"
      @click="logOut"
      style="margin-top: 17px"
    >
    </van-button>
    <!-- 时间选择控件 -->
    <van-popup v-model="showDateTimePopView" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>
    <!-- 性别选择控件 -->
    <van-popup v-model="showChooseSex" position="bottom" :style="{height: '25%'}">
      <van-radio-group v-model="userInfo.sex">
        <van-cell-group style="margin-top: 35px"  @click="clickCell(radio)">

          <van-cell title="美女" clickable  @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" checked-color="#07c160"/>
            </template>
          </van-cell>

          <van-cell title="帅哥" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" checked-color="#07c160"/>
            </template>
          </van-cell>

        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <!--  路由跳转 -->
    <transition name="router-slider" mode="out-in">
      <router-view/>
    </transition>
  </div>
</template>
<script>

import { mapMutations, mapGetters } from 'vuex'

// 引入时间格式化组件Moment
import Moment from 'moment'

export default {
  name: 'UserCenter',
  data () {
    return {
      showDateTimePopView: false,
      showChooseSex: false,
      currentDate: new Date('1989/01/01'),
      // 最小时间
      minDate: new Date('1949/01/01'),
      maxDate: new Date('2020/12/31'),
    }
  },
  computed: {
    ...mapGetters({
      userSex: 'USER_SEX',
      userInfo: 'userInfo'
    }),
    phoneNumber () {
      // 设置隐藏手机号中间四位
      var mobile = String(this.userInfo.phone)
      var reg = /^(\d{3})\d{4}(\d{4})$/
      return mobile.replace(reg, '$1****$2')
    }
  },
  methods: {
    ...mapMutations([
      'USER_INFO_BRITHDAY',
      'LOGIN_OUT',
      'USER_INFO_SEX'
    ]),
    // 返回
    handleToBack () {
      this.$router.back()
    },
    // 修改昵称
    goToChangeNickName () {
      // 跳转路由并且将昵称传递过去
      this.$router.push({
        name: 'ChangeNickName',
        params: {
          nickName: this.userInfo.user_name
        }
      })
    },
    // 修改性别
    onChangeSex () {
      this.showChooseSex = true
    },
    clickCell (radio) {
      let sex = radio
      this.USER_INFO_SEX({ sex })
      setTimeout(() => {
        this.showChooseSex = false
        this.$toast({
          message: '个人资料修改成功',
          duration: 800
        })
      }, 300)
    },
    // 选择生日
    showDateTime () {
      this.showDateTimePopView = true
    },
    // 格式化DateTime pickView
    formatter (type, value) {
      if (type === 'year') {
        return `${value}`
      } else if (type === 'month') {
        return `${value}`
      } else if (type === 'day') {
        return `${value}`
      }
      return value
    },
    // DateTime pcikView 确定
    confirm (value) {
      const brithday = Moment(value).format("YYYY-MM-DD")
      this.brithdayText = brithday
      this.USER_INFO_BRITHDAY({ brithday })
      this.showDateTimePopView = false
      this.$toast({
        message: '个人资料修改成功',
        duration: 800
      })
    },
    // DateTimt pickView 取消
    cancel () {
      this.showDateTimePopView = false
    },
    // 退出登录
    logOut () {
      this.$dialog.confirm({
        message: '确定退出登录吗?'
      }).then(() => {
        // on confirm
      this.LOGIN_OUT()
      this.$toast({
        message: '退出成功',
        duration: 800
      })
      this.$router.back()
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.user-center {
  @include setAllcover(999);
  background-color: #f5f5f5;
  .avatar {
    display: flex;
    align-items: center;
    @include setWH(100%, px2rem(52));
    margin-top: px2rem(52);
    padding: 0 px2rem(16);
    background-color: #fff;
    .title {
      height: px2rem(52);
      line-height: px2rem(52);
      @include setFontColor(px2rem(14), #323233);
    }
    img {
      position: absolute;
      right: px2rem(28);
      @include setWH(px2rem(44), px2rem(44));
    }
  }
  /*转场动画*/
  .router-slider-enter-active,
  .router-slider-leave-active {
    transition: all .3s;
  }

  .router-slider-enter,
  .router-slider-leave-active {
    transform: translate3d(px2rem(35), 0, 0);
    opacity: 0;
  }
}
</style>

